<template>
  <div class="checkSuccess">
    <div class="header">
		<div class="toutou">
			<p>退款申请已提交，等待商家确定</p>
		</div>
      
      <div class="TuiKuanInfo">
        <div>
          <img style="width:55px;height: 60px;" src="https://pic.imeitou.com/uploads/allimg/220928/8-22092Q40925.jpg" alt="" />
        </div>
		<div>
			
			  <span>The Girl - 单人</span>
				
			  <span>单人照</span>
					
		</div>
        <div >
			<div class="conyu">
			
				
				<div>
							  
								  <span>￥<span>399</span></span>
							
				  
				</div>
				
			</div>
          
        
        </div>
		      </div>
		<!-- 预约信息 -->
		<div class="yuyueinfo">
			<div class="yuyuetime">
				<div>
				<span>预约时间:</span>	<span>2023-10-5 16:18</span></div>
			</div>
			<div class="youhuijuan">
				<div>
					<p>优惠卷</p>
				</div>
				<div>
					<p>暂无优惠卷</p>
				</div>
			</div>
			<div class="xiaoji">
			<div><span>小计:￥<span>399</span></span></div>
			</div>
		</div>
		<!-- 订单详细信息 -->
		<div class="OrderDetailInfo">
			<div class="OrderInfo">
				<p>订单信息</p>
			</div>
			<div class="AddressInfo">
				<div class="AddressInfoBox">
					<div>
						收获信息
					</div>
					<div class="addressin">
						<div>
							<span>落辰</span>
						</div>
						<div>
							<span>2023-8-10</span>
						</div>
						<div>
							<span>女</span>
						</div>
					</div>
				</div>
			</div>
			<div class="OrderBianHao">
				<div>
					<span>订单编号</span>
				</div>
				<div>
					<span>110133906950283689</span>
				</div>
				<div>
					<button class="copyBtn">复制</button>
				</div>
				
			</div>
			<div class="createTime">
				<div class="createTimeBox">
					<span>创建时间</span>
				</div>
				<div>
					<span>2023-8-24 0:56</span>
				</div>
			</div>
			<div class="PayNowBox">
			<div >
				<span>支付方法</span>
			</div>
			<div>
				微信支付
			</div>
				
			</div>
		</div>
		<!--描述 -->
		<div class="desc">
			<ul>
				<li>
					预约成功后可修改六次时间。
				</li>
				<li>
					拍摄高峰可能稍需等待，如您无法按时到店，烦请提前与门店联系，我们会尽力协调，门店繁忙时
					可能无法安排拍摄或需改期。
				</li>
				<li>
					若拍摄前24小时内申请退款需收取订单金额的15
					%作为手续费。
				</li>
				<li>
					多个产品下单，若非同一人拍摄，须到店补差价。
				</li>
				<li>
					为保障您的资金安全与自身权益，请杜绝与个人
					收款账号及手交易平台进行交易。
				</li>
			</ul>
		</div>
        <div class="checkSuccessCon">
          <!-- 申请退款 和联系商家的按钮-->
          <div class="checkSuccessConBtn">
			  <div>
				     <button class="btn" type="default" plain="true" @click="AreYouSureCancel">取消售后</button>
			  </div>
			  <div>
				   <button class="btn" type="default" plain="true">追加评论</button>
			  </div>
         
	
          </div>
        </div>
		<!-- 确认框确认是否售后 
		-->
		<van-dialog v-model:show="show" title="确定取消吗？" show-cancel-button @confirm="confirm">
、
		</van-dialog>

    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'
    const show = ref(false);
const AreYouSureCancel=()=>{
	show.value=true
	
}
const confirm=(e)=>{
		uni.navigateTo({
			url:'/pages/TuiKuanShenQingQuXiao/TuikuanShenQingYiQuXiao'
		})
}

</script>
<style scoped>
	.toutou{
		width: 100%;
		height: 300rpx;
		background-color: #ffa400;
		color:#ffedce
	}
	.TuiKuanInfo{
		width: 350px;
	padding-left:11px ;
	padding-top:12px ;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items:center;
		font-size: 12px;
		position: absolute;
		top:45px;
		left: 13px;
		
		
	}
	.conyu{
		display: flex;
		justify-content: space-between;
	}
	.yuyueinfo{
		/* border: 1px solid red; */
		position: absolute;
		top:108px;
		left: 13px;
		width: 350px;
		background-color: #ffffff;
	}
	
	.yuyuetime{
		width: 350px;
				/* border: 1px solid black; */
					background-color: #ffffff;
				padding: 10px;
				font-size: 15px;
				margin-top: 10px;
				
		
	}
	.youhuijuan{
		padding: 10px;
		font-size: 15px;
		margin-top: 10px;
		/* border: 1px solid black; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	.xiaoji{
				/* border: 1px solid black; */
				padding: 5px;
				float:right;
	}
	.OrderDetailInfo{
					/* border: 1px solid black; */
					margin-top: 100px;
		
	}
	.OrderInfo{
		/* border: 1px solid black; */
		/* padding: 10px; */
		width: 350px;
				/* border: 1px solid black; */
					background-color: #ffffff;
				padding: 10px;
				font-size: 15px;
				margin-top: 10px;
				padding-left:20px ;
	}
	.AddressInfo .AddressInfoBox{
						/* border: 1px solid black; */
						width: 350px;
								/* border: 1px solid black; */
									background-color: #ffffff;
								padding: 10px;
								font-size: 15px;
								margin-top: 10px;
								padding-left:20px ;
								display: flex;
								justify-content: space-between;
								align-items: center;
		
		
	
	}
	.addressin{
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		width: 150px;
	}
	.OrderBianHao{
		display: flex;
		justify-content: space-around;
		align-items: center;

			padding-left: 12px;
			padding: 5px;
		
	}
	.copyBtn{
	
		font-size: 13px;
		background-color: lightblue;
		color: white;
	}
	.createTime{
					/* border: 1px solid black; */
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-left: -40px;
					padding:5px;
					
			
					
					
		
	}
	.createTimeBox{

		padding: 5px;
		margin-left: -45px;
	}
.PayNowBox{
	display: flex;
	justify-content: space-around;
	align-items: center;
			margin-left: -60px;

		padding: 5px;
}
.desc{
	/* border: 1px solid red; */
	height: 200px;
	line-height:20px;
	margin-top: 10px;
	padding: 10px;
}
.checkSuccessConBtn{
	display:flex;
	justify-content: flex-end;
	align-items: center;
}
.btn{
	font-size: 12px;
	width: 100px;
	margin-right: 20px;
}
.Determine-whether-to-apply-for-a-refund{

	text-align: center;
	padding-top: 10px;
	padding-bottom:10px ;
}
.refundInfo{
		/* border: 1px solid black; */
		text-align: center;
		padding: 15px;
}
.TuiKuanBox{
	/* border: 1px solid red; */
	display: flex;
	justify-content: space-around;
	align-items: center;
	
	
}
.TuiBtn{

	width: 100px;
	height: 35px;
	font-size: 12px;
	color: white
}
.TuiKuanBtn{
	background-color: aqua;
}
.BuTuiLe{
	display: inline-block;
background-color: coral;	
}
.ReasonforrefundBox{
	border: 1px solid red;
	padding: 5px;
	
}
.TuiKuanLiyou{
	/* border: 1px solid black; */
	text-align: center;
	padding-top: 10px;
	
	
}
.TuiKuandesc{
	/* border: 1px solid black; */
	margin-top: 12px;
}
.TuiKuanYuanYin{
	
}
.Tui{
	background-color: orange;
}
</style>

